<template>
  <div class="musicList">
    <ul class="listContainer">
      <li class="musicItem" v-for="(item, index) in searchList" :key="index">
        <div class="leftMessage" @click="updatePlayList(item, index)">
          <span>{{ index + 1 }}</span>
          <div class="songMessage">
            <div class="songName">{{ item.name }}</div>
            <div class="songCreator" v-if="item.artists">
              <div class="creator" v-for="(creator, index) in item.artists" :key="index">{{ creator.name }}</div>
            </div>
            <!-- 这里是个折中的办法,接口传过来的数据不一样啊 -->
            <div class="songCreator forRec" v-if="item.song">
              <div class="creator" v-for="(creator, index) in item.song.artists" :key="index">{{ creator.name }}</div>
            </div>
          </div>
        </div>
        <div class="mvIcon">
          <svg class="icon" aria-hidden="true" v-if="item.mv != 0" style="margin-right:15px">
            <use xlink:href="#icon-bofang"></use>
          </svg>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-caidan1"></use>
          </svg>
        </div>

      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: ['searchList'],
  methods: {
    // 点击歌曲，进行播放
    updatePlayList(item, index) {
      this.$store.commit('updatePlayList', this.searchList)
      console.log(this.searchList);
      if (item.album) {
        item.al = item.album
      }
      // item.al.picUrl = item.album.artist.img1v1Url || 'https://p1.music.126.net/6y-UleORITEDbvrOLV0Q8A==/5639395138885805.jpg'
      if (item.album) {
        item.al.picUrl = item.album.artist.img1v1Url
      }
      // else {
      //   item.al.picUrl = 'https://p1.music.126.net/6y-UleORITEDbvrOLV0Q8A==/5639395138885805.jpg'
      // }
      this.$store.commit('pushPlayList', item)
      this.$store.commit('updatePlayListIndex', index)
    }
  }
}
</script>

<style lang="less" scoped>
.musicList {

  .listContainer {
    padding-bottom: 1rem;

    .musicItem {
      display: flex;
      margin: 5px 0;
      justify-content: space-between;
      align-items: center;
      height: 50px;
      padding: 0 5px;
      box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.23);
      transition: all .3s ease;

      &:hover {
        background-color: rgba(52, 215, 155, 0.152)
      }

      .leftMessage {
        display: flex;
        align-items: center;

        span {
          margin-right: 15px;
        }

        .songMessage {
          .songName {
            width: 250px;
            font-weight: bold;
            font-size: 14px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          .songCreator {
            display: flex;
            color: gray;
            font-size: 13px;
            width: 230px;
            overflow: hidden;
            text-overflow: ellipsis;

            .creator {
              &:nth-child(n+2) {
                margin: 0 8px;
              }
            }
          }
        }
      }
    }
  }
}
</style>